<html>
<meta charset="UTF-8">
<head>
    <title>搜索辅助</title>
    <!--<script src="https://unpkg.com/vue"></script>-->
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">

        // 粘贴事件绑定到 document
        document.addEventListener("paste", function (e) {
            var cbd = e.clipboardData;
            var ua = window.navigator.userAgent;
            // 如果是 Safari 直接 return
            if ( !(e.clipboardData && e.clipboardData.items) ) {
                return;
            }
            // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
            if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
                cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
                ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
                return;
            }
            for(var i = 0; i < cbd.items.length; i++) {
                var item = cbd.items[i];
                if(item.kind == "file"){
                    var blob = item.getAsFile();
                    if (blob.size === 0) {
                        return;
                    }
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);
                    reader.onload = function(e){

                        var reg = /,/;
                        var base64str = e.target.result;
                        var resultArr = base64str.split(reg);
                        var finallyResultStr = resultArr[1];
                        axios.post('/cdapi', {
                            imgbase: finallyResultStr
                        })
                            .then(function (response) {
                                console.log("成功",response.data.ret);
                                var result = "";
                                var res = response.data.ret.forEach(function (item,index,                           input) {
                                    result = result+" "+item.word
                                })
                                window.app.message = result;
                                var regularStr = /\d*\./;
                                var regularStr2 = /\d*/;
                                var queryStr = result.replace(regularStr,"").replace(regularStr2,"");
                                var str = "https://www.baidu.com/s?ie=UTF-8&wd="+queryStr;
                                window.open (str, "newwindow"); //写成一行
                            })
                            .catch(function (error) {
                                console.log("失败",error);
                                window.app.message = "啊哦~看不出来";
                            });


                    };
//            console.log(blob)

                }
            }
        }, false);

    </script>
    <style>
        #app{
            text-align:center;
        }
        h3{
            /*width: 100%;*/
            /*background-color: rebeccapurple;*/
            color: red;
        }
        #copyright{
            /*text-align:center;*/
            position: absolute;
            bottom:20px;
            left: 45%;
        }
        #niuBiModeDIV{
            /*border:  1px;*/
            color: gray;
        }
        p{
            text-align: left;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>智能识别图中文字,自动去题号,自动调用百度搜索,解决手残问题</h3>

    <p style="color: green;font-weight: bolder">一.使用教程(文字版)</p>
    <p v-for="item in arr">{{item}}</p>
    <p>注意:请使用chrome浏览器,查询完成如果没有自动百度,请在浏览器地址栏最后找,有个按钮,点击选择'始终允许弹出式窗口'.  截图请让文字周围留有空白</p>
    </br>
    <p style="color: green;font-weight: bolder;" ><a href="./guide">二.使用教程(视频版):https://gym.boysummer.top/guide</a></p>
    <p style="text-align: center;">芝士超人 <span style="color: red;">复活卡扫码</span>,感激不尽</p>
    <img src="/1515546782.png" alt="">
    <p style="text-align: center;">西瓜视频邀请码:<span style="color: red;text-align: center;">AV672</span>,感激不尽(行行好吧,真不够用)</p>
    <div  id="niuBiModeDIV" @click="niuBiMode=!niuBiMode">{{niuBiModeMsg}}</div>

    <h3>识别结果区:↓↓↓↓↓↓↓↓↓↓↓</h3>
    <div style="height: 300px"><span>{{ message }}</span></div>

    </br>


    <!--<p id="copyright">@copyright: summer</p>-->
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '',
            arr:["0.用电脑打开页面","1.使用itools连接iphone,点击工具箱->实时桌面->!!全屏!!(安卓同理,总之只要把手机桌面投影到电脑上就行)","2.使用QQ截图从上一步的实时桌面中截取需要识别的图(为了保证正常,不要有干扰项)","3.截图完成后鼠标单击本页面!!!!!!保证当前窗口在最前!!!!!","4.ctrl+v粘贴","5.等待结果"],
            niuBiMode:false,
            niuBiModeMsg:"预告(此为实验版,未来有超屌的版本,只要填上方邀请码,请等待)"
        },
        watch: {
            niuBiMode(newval){
                if (newval){
                    this.niuBiModeMsg = "当前为分享版(识别精度不高,高精版肯定留着自己用啊)"
                }else{
                    this.niuBiModeMsg = "当前为分享版(识别精度不高,高精版肯定留着自己用啊)"
                }
            }
        }
    })
</script>
</body>
</html>